<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>黄珂的页面</title>
    <style>
        *{
            box-sizing: border-box;
        }
        body{
            border:0;
            padding:0;
            margin:0;
        }
        .shop-list{
            width:1000px;
            margin:20px auto;
            border:1px solid black;
            padding:25px;
            border-radius: 20px 20px;
        }
        .list{
            margin-top:15px;
            width:100%;
            height:200px;
            border:blue solid 1px;
            border-radius: 20px 20px;
            padding-left:35px;
            line-height: 200px;
        }
        .list-img{
            display: inline-block;
            overflow: hidden;
            width:200px;
            height:198px;
        }
        .list-img img{
            width:200px;
            height:auto;
        }
        .list-description{
            display: inline-block;
            height:200px;
            vertical-align: top;
            padding-left:25px;
            padding-right:25px;
        }
        .list-btn {
            margin-left:250px;
            display: inline-block;
            height:200px;
            line-height: 200px;
            vertical-align: top;
        }
        .btn input{
            margin-left:15px;
            margin-right:15px;
        }
        .detail-table,.edit-table{
            width:1000px;
            height:250px;
            background-color: yellow;
            display: none;
            position: fixed;
            top:10%;
            left:18%;
            margin:0 auto;
        }
        .detail-table div,.edit-table div{
            width:150px;
            height:150px;
            background-color: goldenrod;
            margin:10px;
        }
        .detail-table input,.edit-table input{
            font-size: 30px;
            position: absolute;
            top:5px;
            right:10px;
            border:1px solid black;
            border-radius: 50%;
        }
    </style>
</head>
<body>
<div class="shop-list">
    <div class="list">
        <div class="list-img">
            <img src="下载.jpg"/>
        </div>
        <div class="list-description">
            <ul>
                <li>
                    商品名称:<span>海燕咖啡</span>
                </li>
                <li>

                </li>
            </ul>

        </div>
        <div class="list-btn">
            <input type="button" value="查看详情" class="detail"/>
            <input type="button" value="修改" class="edit"/>
            <input type="button" value="删除" class="delete"/>
        </div>
    </div>
</div>
<div class="detail-table">
    <div></div>
    <input type="button" value="x" class="close"/>
</div>
<div class="edit-table">
    <div></div>
    <input type="button" value="x" class="close"/>
</div>
<script src="jquery.min.js"></script>
<script>
    //插入数据
//    $.ajax({
//        url:'',
//        data:'',
//        type:'get',
//        dataType:'json',
//        success:function(res){
//           for(var i=0;i>res.length;i++){
//               str+=" <div class=\"list\">\n" +
//                   "        <img src=\"下载.jpg\"/>\n" +
//                   "        <strong>参数1</strong>\n" +
//                   "        <strong>参数2</strong>\n" +
//                   "        <strong>参数3</strong>\n" +
//                   "        <div class=\"btn\">\n" +
//                   "            <input type=\"button\" value=\"查看详情\" class=\"detail\"/>\n" +
//                   "            <input type=\"button\" value=\"修改\" class=\"edit\"/>\n" +
//                   "            <input type=\"button\" value=\"删除\" class=\"delete\"/>\n" +
//                   "        </div>\n" +
//                   "    </div>"
//           }
//           $(".shop-list").append(str);
//        },
//        error:function(){
//
//        }
//    })
    //点击查看详情，让整个块透明度变小，让详情块显示，或者用动态数据去插入
    $(".detail").click(function(){
        $(".shop-list").css("opacity",0.2);
        $(".detail-table").css("display","block")
    });
    //点击修改，让整个块头民，让修改块显示，用动态数据插入。
    $(".edit").click(function(){
        $(".shop-list").css("opacity",0.2);
        $(".edit-table").css("display","block")
    });
    //关闭按钮之后，让原来的块显示，当前块隐藏
    $(".close").click(function(){
        $(this).parent().css("display","none");
        $(".shop-list").css("opacity",1);
    });
    //删除之后传给数据库
    $(".delete").click(function(){
        $.ajax({
            url:'',
            data:'',
            dataType:'json',
            type:'post',
            success:function(res){
                if(res=='1'){
                    $(this).parent().parent().remove();
                    alert("删除成功")
                }
            },
            error:function(){
                alert("未删除成功")
            }
        })
    })
</script>
</body>
</html>